<template>
  <div class="tpl45-slideNav">
    <section
      :style="`padding-top:${tplItemData.modulePadding || 5}px; padding-bottom:${tplItemData.modulePadding || 5}px;`"
      class="modulePadding">
      
      <section class="diy-slideNav clearfix" v-if="tplItemData.layout == 1">
        <section class="slide_box">
          <ul
            class="slideNav62"
            :class="tplItemData.layout1_style == 1 ? '': 'on'">
            <li
              v-for="(item, index) in tplItemData.dataset" :key="index"
              :class="`col${tplItemData.dataset.length}`">
              <a @click="openLink(item.link)" class="slideNav-img bdbox">
                <p v-if="tplItemData.layout1_style == 1" class="slideNav_img" style="margin-top: 8px">
                  <img class="img" :src="item.pic" alt="" >
                </p>
                <div v-if="item.showtitle">
                  <p
                    v-if="item.titleBackgroundColor"
                    class="info bdbox "
                    :style="`background-color:${item.titleBackgroundColor};color:${item.titleColor};padding: 12px 5px 7px 5px;font-size:${tplItemData.fontSize}px;`">{{ item.showtitle }}</p>
                  <p
                    v-else
                    :class="tplItemData.fontSize"
                    class="info bdbox"
                    :style="`background-color:transparent;color:#000;padding: 12px 5px 7px 5px;font-size:${tplItemData.fontSize}px;`">
                    {{ item.showtitle }}
                  </p>
                </div>
              </a>
            </li>
          </ul>
        </section>
      </section>
    </section>
    
  </div>
</template>

<script>
  import Vue from 'vue'
  import { openPage } from '@/utils/utils'
  export default Vue.extend({
    name: 'index',
    props: {
      tplItemData: {
        type: Object
      }
    },
    methods: {
      // TODO 小程序跳转
      openLink(link) {
          openPage(link)
      },
    }
  })
</script>

<style lang="scss">
  .tpl45-slideNav{
    .modulePadding .diy-slideNav .slide_box .slideNav62{
      background: #fff;
      overflow: auto;
      white-space: nowrap;
      li{
        width: 150px;
        display: inline-block;
        margin-right: 10px;
        .info{
          line-height: 50px;
        }
        .img{
          width: 100%;
        }
      }
    }
  }
</style>
